<!--suppress ALL -->
<template>
  <div class="login-container columnCC">
    <img class="loginBackgroundImage" :src="state.loginBackgroundImage" />

    <el-form ref="refloginForm" class="login-form" :model="formInline" :rules="formRules">
      <div class="title-container">
        <h3 class="title text-center">{{ state.systemName }}</h3>
      </div>
      <el-form-item prop="username" :rules="formRules.isNotNull">
        <div class="rowSC">
          <span class="svg-container">
            <svg-icon icon-class="user" />
          </span>
          <el-input v-model="formInline.username" placeholder="用户名" />
          <!--占位-->
          <div class="show-pwd" />
        </div>
      </el-form-item>
      <!--<el-form-item prop="password" :rules="formRules.passwordValid">-->
      <el-form-item prop="password" :rules="formRules.isNotNull">
        <div class="rowSC flex-1">
          <span class="svg-container">
            <svg-icon icon-class="password" />
          </span>
          <el-input
            :key="passwordType"
            ref="refPassword"
            v-model="formInline.password"
            :type="passwordType"
            name="password"
            placeholder="密码"
            @keyup.enter="handleLogin"
          />
          <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </div>
      </el-form-item>
      <div class="tip-message">{{ tipMessage }}</div>
      <el-button :loading="loading" type="primary" class="login-btn" size="default" @click.prevent="handleLogin">
        登录
      </el-button>
    </el-form>

    <div class="copyright">{{ state.organizationName }}</div>
  </div>
</template>

<script setup lang="ts">
import settings from '@/settings'

import { ElMessage } from 'element-plus'
import { ObjTy } from '~/common'
import { useUserStore } from '@/store/user'
//element valid
const formRules = useElement().formRules
//form
let formInline = reactive({
  username: 'admin',
  password: '123456'
})
let state: ObjTy = reactive({
  otherQuery: {},
  redirect: undefined,
  systemName: '',
  organizationName: '',
  loginBackgroundImage: ''
})

/* listen router change  */
const route = useRoute()
let getOtherQuery = (query: any) => {
  return Object.keys(query).reduce((acc: any, cur: any) => {
    if (cur !== 'redirect') {
      acc[cur] = query[cur]
    }
    return acc
  }, {})
}

watch(
  () => route.query,
  (query) => {
    if (query) {
      state.redirect = query.redirect
      state.otherQuery = getOtherQuery(query)
    }
  },
  { immediate: true }
)

/*
 *  login relative
 * */
let loading = ref(false)
let tipMessage = ref('')

const refloginForm: any = ref(null)
let handleLogin = () => {
  refloginForm.value.validate((valid: any) => {
    if (valid) {
      loginReq()
    } else {
      return false
    }
  })
}

//use the auto import from vite.config.js of AutoImport
const router = useRouter()
let loginReq = () => {
  loading.value = true
  const userStore = useUserStore()
  userStore
    .login(formInline)
    .then((data) => {
      ElMessage({ message: '登录成功', type: 'success' })
      router.push({ path: state.redirect || '/', query: state.otherQuery })
    })
    .catch((res) => {
      tipMessage.value = res.message
      useCommon()
        .sleep(30)
        .then(() => {
          loading.value = false
        })
    })
}
/*
 *  password show or hidden
 * */
let passwordType = ref('password')
const refPassword: any = ref(null)
let showPwd = () => {
  if (passwordType.value === 'password') {
    passwordType.value = ''
  } else {
    passwordType.value = 'password'
  }
  nextTick(() => {
    refPassword.value.focus()
  })
}

onMounted(() => {
  axiosReq({
    url: '/system',
    method: 'get'
  }).then((res: any) => {
    state.loginBackgroundImage = res.data.loginBackgroundImage
    state.systemName = res.data.systemName
    state.organizationName = res.data.organizationName
    document.title = state.systemName
    sessionStorage.setItem('systemName', state.systemName)
    sessionStorage.setItem('systemLogo', res.data.systemLogo)
    sessionStorage.setItem('loginBackgroundImage', state.loginBackgroundImage)
  })
})
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.loginBackgroundImage {
  background-color: white;
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: -1;
}

.copyright {
  position: fixed;
  bottom: 30px;
  color: white;
}

.login-container {
  height: 100vh;
  width: 100%;
  // background-color: #2d3a4b;
  background: transparent no-repeat center;
  background-size: cover;
  // background-image: url('../../assets/bg.jpeg');

  .login-form {
    margin-bottom: 20vh;
    width: 360px;
    background-color: rgba($color: #2d3a4b, $alpha: 0.9);
    padding: 40px;
    border-radius: 16px;
  }

  .title-container {
    margin-bottom: 40px;
    margin-top: 10px;

    .title {
      font-size: 22px;
      color: #eee;
      margin: 0px auto 25px auto;
      text-align: center;
      font-weight: bold;
    }
  }
}

.svg-container {
  padding-left: 6px;
  color: $dark_gray;
  text-align: center;
  width: 30px;
}

//错误提示信息
.tip-message {
  color: #e4393c;
  height: 30px;
  margin-top: -12px;
  font-size: 12px;
}

//登录按钮
.login-btn {
  width: 100%;
  height: 44px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: normal;
}

.show-pwd {
  width: 50px;
  font-size: 16px;
  color: $dark_gray;
  cursor: pointer;
  text-align: center;
}
</style>

<style lang="scss">
//css 样式重置 增加个前缀避免全局污染
.login-container {
  .el-input__wrapper {
    background-color: transparent;
    box-shadow: none;
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }

  .el-input input {
    background: transparent;
    border: 0px;
    -webkit-appearance: none;
    border-radius: 0px;
    padding: 10px 5px 10px 15px;
    color: #fff;
    height: 42px; //此处调整item的高度
    caret-color: #fff;
    font-size: 14px;
  }

  //hiden the input border
  .el-input__inner {
    box-shadow: none !important;
  }
}
</style>
